<!--
首页
-->
<template>
    <div class="home">
        <!-- 图片1 -->
        <div class="bg-img1"></div>
        <!-- 图片2             :width="84"
            :height="84"-->
        <div class="bg-img2">
            <lottie
            class="lottie-box"
            :options="defaultOptions"
            v-on:animCreated="handleAnimation" />
        </div>
        <!-- 图片3 -->
        <div class="bg-img3"></div>
        <!-- 图片4 -->
        <div class="bg-img4"></div>
        <!-- 图片5 -->
        <div class="bg-img5"></div>
        <!-- 图片6 -->
        <div class="bg-img6"></div>
        <!-- 驾驶舱  -->
        <div class="control-box">
            <div class="fenbu">
                <block-outer
                :showSlot="false"
                title="当日故障">

                </block-outer>
                <day-fault></day-fault>

            </div>
            <div class="guzhang">
                <block-outer
                :showSlot="false"
                title="故障件分布">

                </block-outer>
                <fault-spread></fault-spread>
            </div>
            <div class="jijian">
                <block-outer
                :showSlot="false"
                title="年度故障件统计">

                </block-outer>
                <year-fault></year-fault>
            </div>
            <div class="niandu">
                <block-outer
                :showSlot="false"
                title="机检比例">

                </block-outer>
                <auto-check></auto-check>
            </div>
        </div>
        <!-- 左下角： 工作量化跟踪 -->
        <div class="job-quant">
            <block-outer
            title="工作量化跟踪"
            img="lb">
                <job-quant></job-quant>
            </block-outer>
        </div>

        <!-- 左侧中间：重点任务 -->
        <div class="break-task">
            <block-outer
            img="lm"
            title="重点任务">
                <break-task></break-task>
            </block-outer>
        </div>

        <!-- 左侧顶部：故障超限指标 -->
        <div class="fault-limit">
            <block-outer
            img="lt"
            title="故障超限指标">
                <fault-limit></fault-limit>
            </block-outer>
        </div>

        <!-- 右侧底部：加装改造设备统计 -->
        <div class="device-static">
            <block-outer
            img="rb"
            title="加装改造设备统计">
                <device-static></device-static>
            </block-outer>
        </div>

        <!-- 右侧中部：备品统计 -->
        <div class="bp-static">
            <block-outer
            img="rm"
            title="备品统计">
                <bp-static></bp-static>
            </block-outer>
        </div>

        <!-- 右侧顶部：无线报警统计 -->
        <div class="bp-num">
            <block-outer
            img="rt"
            title="无线报警统计">
                <wireless-warn></wireless-warn>
            </block-outer>
        </div>

        <!-- 中间：无线超时统计 -->
        <div class="wireless-static">
            <block-outer
            img="m"
            title="无线超时统计">
                <wireless-day></wireless-day>
            </block-outer>
        </div>

        <!-- 中间顶部 -->
        <div class="static-all">
            <train-list></train-list>
        </div>

        <!-- 底部logo -->
        <div
        @click="goToZnjc"
        class="bottom-logo"
        title="点击去往首页"></div>

        <!-- 顶部标题 -->
        <div class="top-title">

        </div>
    </div>
</template>

<script>
import Lottie from 'vue-lottie/src/lottie';
import * as animationData from '@/common/lottie/hexin';

animationData.assets[0].p = require('../common/lottie/images/img_0.png');

animationData.assets[0].u = '';
animationData.assets[1].u = '';
animationData.assets[1].p = require('../common/lottie/images/img_1.png');

export default {
    name: 'home',
    components: {
        Lottie,
        'block-outer': () => import(/* webpackChunkName: "block-outer" */'@/components/home/block-outer'),
        'job-quant': () => import(/* webpackChunkName: "job-quant" */'@/components/home/job-quant'),
        'device-static': () => import(/* webpackChunkName: "device-static" */'@/components/home/device-static'),
        'bp-static': () => import(/* webpackChunkName: "bp-static" */'@/components/home/bp-static'),
        'wireless-day': () => import(/* webpackChunkName: "wireless-day" */'@/components/home/wireless-day'),
        'train-list': () => import(/* webpackChunkName: "train-list" */'@/components/home/train-list'),
        'fault-limit': () => import(/* webpackChunkName: "fault-limit" */'@/components/home/fault-limit'),
        'break-task': () => import(/* webpackChunkName: "break-task" */'@/components/home/break-task'),
        'wireless-warn': () => import(/* webpackChunkName: "wireless-warn" */'@/components/home/wireless-warn'),
        'fault-spread': () => import(/* webpackChunkName: "fault-spread" */'@/components/home/fault-spread'),
        'day-fault': () => import(/* webpackChunkName: "day-fault" */'@/components/home/day-fault'),
        'auto-check': () => import(/* webpackChunkName: "auto-check" */'@/components/home/auto-check'),
        'year-fault': () => import(/* webpackChunkName: "year-fault" */'@/components/home/year-fault'),
    },
    data() {
        return {
            defaultOptions: { animationData: animationData.default },
            animationSpeed: 1,
            anim: {},
        };
    },
    methods: {
        // 点击进去智能监测站首页
        goToZnjc() {
            const {
                hostname,
                port,
                protocol,
            } = window.location;
            window.console.log('aa', this.$router.resolve({ path: '/znjc/index' }));
            const PAGE_URL = `${protocol}//${hostname}:${port}/znjc/index/`;
            window.console.log('PAGE_URL', PAGE_URL);

            window.open(PAGE_URL);
        },

        // 动画
        handleAnimation(anim) {
            this.anim = anim;
        },
    },
};
</script>
<style lang="scss">
.home {
    width: 100%;
    height: 100%;
    overflow: hidden;
    position: relative;
    background-image: radial-gradient(49% 100% at 46% 100%, #23338B, #0A163C);

    // 150 210
    .bg-img1 {
        position: absolute;
        width: 7.56%;
        height: 18.817%;
        top: 2%;
        right: 20.93%;
        margin-left: -35%;
        background: url('../assets/line2.png') no-repeat center center;
        background-size: cover;
    }

    // 158 127 // 160 87 //  84 87
    .bg-img2 {
        position: absolute;
        width: 4.375%;
        height: 12.083%;
        bottom: 46.5%;// 6.3rem
        left: 50%;
        margin-left: -2.1875%;
        /* background: url('../assets/ct.png') no-repeat center center;
        background-size: contain; */

        .lottie-box {
            width: 100%;
            height: 100%;
        }
    }

    // 158 127
    .bg-img3 {
        position: absolute;
        width: 15.93%;
        height: .25rem /* 9/80 */;
        bottom: 59.8%;
        right: .5rem;
        background: url('../assets/line1.png') no-repeat center center;
        background-size: 100% 100%;
    }

    // 158 127
    .bg-img4 {
        position: absolute;
        width: 9.88%;
        height: .25rem /* 9/80 */;
        bottom: 34.2%;
        right: .5rem;
        background: url('../assets/line3.png') no-repeat center center;
        background-size: 100% 100%;
    }

    // 158 127
    .bg-img5 {
        position: absolute;
        width: 7.66%;
        height: 37%;
        bottom: 39.874%;
        right: 19.86%;
        background: url('../assets/g2.png') no-repeat center center;
        background-size: 100% 100%;
    }

    // 158 127
    .bg-img6 {
        position: absolute;
        width: .525rem;
        height: 1.06rem;
        bottom: 39.292%;
        right: 23.8%;
        background: url('../assets/g1.png') no-repeat center center;
        background-size: 100% 100%;
    }

    // 625
    .control-box {
        position: absolute;
        width: 70.3%;
        height: 51.5%;
        bottom: 2.6%; // .7rem
        left: 50%;
        margin-left: -35.15%;
        background: url('../assets/control.png') no-repeat center center;
        background-size: 100% 100%;

        .fenbu {
            position: absolute;
            left: 3.125%;//.75rem;
            bottom: 3.6rem;
            width: 20%;
            height: 32%;
            transform: rotate(342deg);
        }

        .guzhang {
            position: absolute;
            // left: 8.8rem;
            // bottom: 4.85rem;
            left: 23%;
            bottom: 47%;
            width: 20%;
            height: 32%;
            transform: rotate(352deg);
        }

        .jijian {
            position: absolute;
            // left: 18.2rem;
            // bottom: 5.1rem;
            right: 25%;
            bottom: 49%;
            width: 25%;
            height: 32%;
            transform: rotate(2deg);
        }

        .niandu {
            position: absolute;
            right: 5%;
            bottom: 34%;
            width: 20%;
            height: 32%;
            transform: rotate(16deg);
        }
    }
    // 1983 * 1116
    // 左下角 238 * 500 12% * 45%
    .job-quant {
        position: absolute;
        width: 12%;
        height: 45%;
        left: 1%;
        bottom: 3%;
    }
    // 610*266
    .break-task {
        position: absolute;
        /* width: 30.7%; */
        width: 28%;
        height: 23.8%;
        left: 1%;
        bottom: 50.7%;
    }

    // 562*225
    .fault-limit {
        position: absolute;
        width: 28%;
        height: 20%;
        left: 1%;
        top: 2%;
        //background: #f40;

    }

    // 262*347
    .device-static {
        position: absolute;
        width: 13%;
        height: 31%;
        right: 1%;
        bottom: 3%;
    }

    // 466 * 290
    .bp-static {
        position: absolute;
        width: 23%;
        height: 26%;
        right: 1%;
        bottom: 35.8%;
    }

    // 386 * 366
    .bp-num {
        position: absolute;
        width: 19%;
        height: 32.7%;
        top: 2%;
        right: 1%;
    }

    // 805 * 145
    .wireless-static {
        position: absolute;
        /* width: 40.5%;
        height: 13%;
        left: 32.4%; */
        width: 39.18%;
        height: 13%;
        left: 30.45%;
        bottom: 59%;
    }

    // 777*188
    .static-all {
        position: absolute;
        width: 39.18%;
        height: 16.84%;
        left: 30.45%;
        top: 9.4%;
    }

    // 1423 * 96    // 62
    .bottom-logo {
        position: absolute;
        width: 71.75%;
        height: 8.6%;
        left: 50%;
        margin-left: -35.875%;
        bottom: 0;
        background: url('../assets/bottom.png') no-repeat center center;
        background-size: cover;
        cursor: pointer;
    }

    // 862 * 80
    .top-title {
        position: absolute;
        width: 43.46%;
        height: 7.16%;
        left: 50%;
        margin-left: -21.73%;
        top: 0;
        background: url('../assets/title.png') no-repeat center center;
        background-size: cover;
    }
}
</style>
